<template>
    <div class="body-page">
        <el-row class="header-box" justify="space-between" align="middle">
            <div>
                <span class="header-title" v-if="title">{{ title }}</span>
                <slot v-else name="title-left"/>
            </div>
            <slot name="title-right"/>
        </el-row>
        <el-divider style="margin: 12px 0"></el-divider>
        <el-row class="search-box" justify="space-between">
            <slot name="search-left"/>
            <slot name="search-right"/>
        </el-row>
        <div class="content-box">
            <slot name="content"/>
        </div>
        <el-row class="pagination-box" v-if="showPagination">
            <slot name="pagination"/>
        </el-row>
    </div>
</template>
<script setup lang="ts">
defineProps({
    title: {
        type: String,
        default: ''
    },
    showPagination: {
        type: Boolean,
        default: true
    }
})
</script>


<style scoped lang="scss">
.body-page {
    height: calc(100% - 24px);
    margin: 12px;
    background: white;
    display: flex;
    flex-direction: column;
    padding: 12px;
    border-radius: var(--el-border-radius-base);

    .header-box {
        .header-title {
            font-weight: bold;
            padding-left: 12px;
            position: relative;
            font-size: 18px;

            &::before {
                content: '';
                width: 2px;
                top: 0;
                position: absolute;
                left: 0;
                bottom: 0;
                background-color: var(--el-color-primary);
                border-radius: 2px;
            }
        }
    }

    .search-box {
        //
        ::v-deep(.el-form-item__label) {
            font-weight: bold;
        }

        //常规输入框宽度
        ::v-deep(.el-input) {
            width: 160px;
        }

        //数字输入框宽度
        ::v-deep(.el-input-number) {
            width: 160px;
            text-align: left;
        }

        //数字输入框宽度
        ::v-deep(.el-input-number .el-input__inner) {
            text-align: left;
        }

        ::v-deep(.el-select) {
            width: 160px;
        }
    }

    .content-box {
        flex: 1;
        overflow: auto;
    }

    .pagination-box {
        margin-top: 24px;
    }
}
</style>